<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>高拍仪</title>
    
	<%@ include file="/main/main_css.jsp" %>
    <%@ include file="/main/main_js.jsp" %>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <script src="JS/Camera.js"></script>
    <script src="JS/main.js"></script>
    <script src="static/js/public.js"></script>
	<style type="text/css">
		.layui-layer-dialog {
		    min-width: 260px;
		    margin-left: 5%;
		}
	</style>
  </head>
  
  <body onload="onPageLoad();">
    <!--  -->
    <div class="all-wrapper">
        <div class="row com-header">
            <span>智能服务自助终端</span>
        </div>
        <div class="row main-content take-photos">
            <div class="col-md-24" >
                <div class="time-count pull-right">
                    <span>剩余</span>
                    <span id="time" class="text-red"></span>
                    <span>秒</span>
                </div>
            </div>
            <div class="col-md-12">
                <div class="row photo-wp">
                    <div class="photo-com">
                        <span class="tip">请将文件放置到指定区域</span>
                        <span class="tip">按照提示操作</span>
                    </div> 
                </div>
            </div>
            <div class="col-md-12 photo-handle">
                <div class="row">
                	<div class="col-md-12 handle-btn handle-btn1">
                		<i class="fa fa-check"></i>
                		<button class="btn btn-lg btn-default btn-bustom-ll" onclick="idCode();">证件照</button>
                	</div>
                	<div class="col-md-12">
	                	<button class="btn btn-lg btn-primary btn-bustom-ll" id="add-pic">拍照</button>
                	</div>
                </div>
                <div class="row">
                	<div class="col-md-12 handle-btn">
                		<i class="fa fa-check"></i>
                		<button class="btn btn-lg btn-default btn-bustom-ll" onclick="A3();">A3</button>
                	</div>
                	<div class="col-md-12">
	                    <button class="btn btn-lg btn-info btn-bustom-ll" id="delete-pic">删除</button>
                	</div>
                </div>
                <div class="row">
                    <div class="col-md-12 handle-btn">
                    	<i class="fa fa-check"></i>
                		<button class="btn btn-lg btn-default btn-bustom-ll" onclick="A4();">A4</button>
                	</div>
                	<div class="col-md-12">
	                    <button class="btn btn-lg btn-success btn-bustom-ll" id="to-upload">上传</button>
                	</div>
                </div>
            </div>
            <div class="col-md-24 pic-view">
            	<div class="swiper-container-a">
            		<ul class="list-unstyled clearfix swiper-wrapper">
            		<c:forEach var="base" items="${imgStrlist }">
            		 <li class="pull-left swiper-slide swiper-slide-visible swiper-slide-active">
            		 	<a href="javascript:void(0);">
            		 		<i class="fa fa-check"></i>
            		 		<div class="imgage-wrapper">
            		 			<img style='width:100px;height:69px;' alt="" src="data:image/jpeg;base64,${base }">
            		 		</div>
            		 	</a>
            		 </li>
            		</c:forEach>
            		</ul>
            	</div>
            </div>
            <i class="fa fa-angle-left" id="look-left"></i>
            <i class="fa fa-angle-right" id="look-right"></i>
        </div>
        <div class="row footer">
            <button class="btn btn-primary btn-lg" onClick="prv();" role="button"><i class="fa fa-arrow-left"></i>上一步</button>
        </div>
    </div>
    <form id="loginOut" action="loginOut"></form>
    <!-- 上传form -->
    <form id="uploadForm" action="uploadfile" method="post">
    	<input type="hidden" id="baseFile" name="baseFile"/>
    	<input type="hidden" id="itemId" name="itemId" value="${itemId }"/>
    	<input type="hidden" name="id" value="${id }"/>
    	<input type="hidden" name="currentPage" value="${currentPage }"/>
    </form>
    <input type="hidden" id="openType" value="${openType }"/>
    
    <script>
    	$('.handle-btn1').addClass('active');
    	$('.handle-btn').on('click',function(){
    		$('.handle-btn').removeClass('active');
    		$(this).addClass('active');
    	});
	    function idCode(){
	    	var type = 2 ;
	    	openCameras(type);
	    }
	   
	    function A3(){
	    	var type = 0 ;
	    	openCameras(type);
	    }
	    
	    function A4(){
	    	var type = 1 ;
	    	openCameras(type);
	    }
    	function onPageLoad(){
    		countdown();
    		var	type = 2;
    		openCameras(type);
    		/* var h = $('.main-content').height() - $('.time-count-wp').height() - $('.photo-wp').height() - $('.pic-view').height() - 100;
             */
             $('.photo-wp').css('margin-bottom','80px');
    	}
    	
    	var mySwiper = new Swiper('.swiper-container-a',{
            loop:false,
            grabCursor: true,
            slidesPerView: 1
        })
    	
    	var count = 119;
    	function countdown(){
    		$("#time").text(count);
    		if(count > 0){
    			window.setTimeout("countdown()",1000);
    			count --;
    		}else{
    			//关闭硬件
    			closeCamera();
    			//跳转到首页
    			$("#loginOut").submit();
    		}
    	}
    	
    	//打开高拍仪摄像头
    	function openCameras(type){
    		var obj={"openType": type,"layoutX": 160,"layoutY": 130,"layoutWidth": 480,"layoutHeight": 420,"choiceCamera":1};
    		var data=JSON.stringify(obj);
    	    send_command(
    	        "openCamera",
    	        data,
    	        function (json) {
    	        	var data = JSON.parse(json);
		            if (data.status == 100) {
		            	show_ca();
		            } else {
		            	layer.alert("操作失败",function(){
			            	//跳转到首页
			    			$("#loginOut").submit();
		            	});
		            	closeCamera();
		            }
    	        });
    	} 
    	
    	// 拍照
        $('#add-pic').on('click',function(){
            var index = layer.load(3, {
                shade: [0.3,'#000'] //0.1透明度的白色背景  
            });
            setTimeout(function(){
                layer.close(index);
            },1000);
            photograph();
        });
    	
    	//拍照
    	function photograph(){
    		send_command(
    		        "takePhoto",
    		        function (receivedData) {
    		            var photoBean = JSON.parse(receivedData);
    		            if (photoBean.status == 100) {
    		                var base64="data:image/jpeg;base64," + photoBean.imgStr;
    		                addPhotos(base64);
    		            } 
    		        }); 
    	}    
    	
    	//将图片放置到页面中展示
    	function addPhotos(base64){
    		var str = "<li class='pull-left swiper-slide swiper-slide-visible swiper-slide-active'>";
    		str += "<a href='javascript:void(0);'>";
    		str += "<i class='fa fa-check'></i>";
    		str += "<div class='imgage-wrapper'>";
    		str += "<img style='width:100px;height:69px;' src='"+base64+"' alt=''>";
    		str += "</div></a></li>";
    		mySwiper.appendSlide(str,'pull-left swiper-slide','li');
    	}
    	
    	//关闭高拍仪
    	function closeCameras(){
    		send_command("closeCamera",function (data) {});
    	}
    	
    	//选中图片
    	$('.pic-view').on('click','a',function(){
            $(this).toggleClass('active');
        });
    	
    	//删除所选中的图片
        $('#delete-pic').on('click',function(){
    		var size = $('.swiper-container-a').find('a.active').size();
    		if(size == 0){
    			layer.alert("请选择需要删除的图片");
    			return;
    		}
            $('.swiper-container-a').find('a.active').each(function(index,el){
                mySwiper.removeSlide(
                    $(el).closest('li').index()
                );
            });
        });
        $('#look-left').click(function(){mySwiper.swipePrev();})
        $('#look-right').click(function(){mySwiper.swipeNext();})
    	
    	//上传所有的图片
    	$('#to-upload').on('click',function(){
       		var json = new Array();
       		$('.swiper-container-a').find('a').each(function(index,el){
       			var base = $(el).find('div img').attr("src");
       			var base64 = base.replace("data:image/jpeg;base64,","");
       			json.push(base64);
            });
       		if(json.length<=0){
    			layer.alert("请拍照之后点击上传");
    			return;
    		}else{
	    		layer.confirm('确定上传所有照片?',function(){
	    			var index = layer.load(3, {
	                    shade: [0.3,'#000'] //0.1透明度的白色背景  
	                });
	                setTimeout(function(){
	                    layer.close(index);
	                },1000);
	        		var imgs = JSON.stringify(json);
	        		$("#baseFile").val(imgs);
	        		closeCamera();
	        		$("#uploadForm").submit();
	    		});
    		}
    	});
        
        function prv(){ 
        	closeCameras();
        	history.go(-1);
        }
        
	    var winH = $(document).height();
	    var mainH = winH -170;
	    $('.main-content').height(mainH);
    </script>
  </body>
</html>
